import { h, ref } from 'vue';
import { cloneDeep } from 'lodash-es';
import { FormSchema } from '@/components/Form';
import { defRangeShortcuts } from '@/utils/dateUtil';
import { renderPopoverMemberSumma, MemberSumma } from '@/utils';

export interface State {
  id: number;
  start: Date;
  startTime: Date;
  endTime: Date;
  createdAt: string;
  createdBy: number;
  createdBySumma?: null | MemberSumma;
  updatedAt: string;
  updatedBy: number;
  updatedBySumma?: null | MemberSumma;
}

export function newState(): State {
  return {
    id: 0,
    start: new Date(new Date().setHours(0, 0, 0, 0)),
    startTime: new Date(new Date().setHours(0, 0, 0, 0)),
    endTime: new Date(new Date().setHours(0, 0, 0, 0)),
    createdAt: '',
    createdBy: 0,
    createdBySumma: null,
    updatedAt: '',
    updatedBy: 0,
    updatedBySumma: null,
  };
}

// 表单验证规则

// 表格搜索表单
export const schemas = ref<FormSchema[]>([
  {
    field: 'id',
    component: 'NInputNumber',
    label: '序号',
    componentProps: {
      placeholder: '请输入序号',
      onUpdateValue: (e: any) => {
        console.log(e);
      },
    },
  },
  {
    field: 'start',
    component: 'NTimePicker',
    label: '开始时间点',
    componentProps: {
      type: 'time',
      format: 'HH:mm',
      valueFormat: 'HH:mm:ss',
      placeholder: '请选择时间',
      clearable: true,
      onUpdateValue: (e: any) => {
        console.log(e);
      },
    },
  },
  {
    field: 'createdAt',
    component: 'NDatePicker',
    label: '创建时间',
    componentProps: {
      type: 'datetimerange',
      clearable: true,
      shortcuts: defRangeShortcuts(),
      onUpdateValue: (e: any) => {
        console.log(e);
      },
    },
  },
]);

// 表格列
export const columns = [
  {
    title: '序号',
    key: 'id',
    align: 'left',
    width: -1,
  },
  {
    title: '时间点',
    key: 'start',
    align: 'left',
    width: -1,
    render(row: State) {
      if (row.start) {
        return row.start.slice(0, 5);
      }
      return row.start;
    },
  },
  {
    title: '开始时间',
    key: 'startTime',
    align: 'left',
    width: -1,
  },
  {
    title: '结束时间',
    key: 'endTime',
    align: 'left',
    width: -1,
  },
  {
    title: '创建时间',
    key: 'createdAt',
    align: 'left',
    width: -1,
  },
  {
    title: '创建人',
    key: 'createdBy',
    align: 'left',
    width: -1,
    render(row: State) {
      return renderPopoverMemberSumma(row.createdBySumma);
    },
  },
  {
    title: '更新时间',
    key: 'updatedAt',
    align: 'left',
    width: -1,
  },
  {
    title: '更新人',
    key: 'updatedBy',
    align: 'left',
    width: -1,
    render(row: State) {
      return renderPopoverMemberSumma(row.updatedBySumma);
    },
  },
];
